<template>
    <div class="content-view">
        <headerView :isBack="true"></headerView>
        <div class="top-select-view">
            <el-select style="width: 200px" v-model="schoolAreaValue" placeholder="请选择">
                <el-option v-for="item in schoolAreaTree"
                        :key="item.id" :label="item.label" :value="item.id">
                </el-option>
            </el-select>
            <el-select style="width: 250px;margin:0 15px" v-model="deptId" placeholder="请选择">
                <el-option
                        v-for="item in schoolOptions" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
            </el-select>
<!--            <el-input style="width: 250px" v-model="institutionName" placeholder="输入名称快速选择机构"></el-input>-->
            <el-select style="width: 250px" v-model="institutionName" filterable clearable
                       placeholder="输入名称快速选择机构">
              <el-option
                  v-for="item in allSchoolOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
              </el-option>
            </el-select>
        </div>
        <div class="main-view">
            <div class="left-view">
                <div class="common-top-view left-top-view-d">
                    <div class="left-top-view-title">
                        <div class="common-left-title">机构累计数据信息</div>
                        <div class="common-right-title">
                            <div class="left-title">
                                已驳回
                            </div>
                            <div class="right-title">
                                机构详细资料
                            </div>
                        </div>
                    </div>
                    <div class="left-top-view-content">
                        <div class="common-content-view">
                            <div class="common-content-left-view"
                                 :class="clickIndex == 1?'common-view-backage':'common-view-backage1'"
                                 @click="leftBtnClick(1)">
                                <div class="iconDiv">
                                    <img src="../../assets/images/institution-7@1x.png" v-if="clickIndex == 1">
                                    <img src="../../assets/images/institution-2@1x.png" v-else>
                                </div>
                                <div class="common-title-view">
                                    <div>
                                        学生人数
                                    </div>
                                    <div>
                                        {{leftDeptInfo.deptStudentCount}}
                                    </div>
                                </div>
                            </div>

                            <div class="common-content-left-view"
                                 :class="clickIndex == 2?'common-view-backage':'common-view-backage1'"
                                 @click="leftBtnClick(2)">
                                <div class="iconDiv">
                                    <img src="../../assets/images/institution-2@1x.png" v-if="clickIndex == 1">
                                    <img src="../../assets/images/institution-1@1x.png" v-else>
                                </div>
                                <div class="common-title-view">
                                    <div>
                                        教师数
                                    </div>
                                    <div>
                                        {{leftDeptInfo.deptTeacherCount}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="common-content-view">
                            <div class="common-content-left-view">
                                <div class="iconDiv">
                                    <img src="../../assets/images/institution-3@1x.png">
                                </div>
                                <div class="common-title-view">
                                    <div>
                                        课程计划生成数
                                    </div>
                                    <div>
                                        {{leftDeptInfo.deptPlanCount}}
                                    </div>
                                </div>
                            </div>

                            <div class="common-content-left-view">
                                <div class="iconDiv">
                                    <img src="../../assets/images/institution-4@1x.png">
                                </div>
                                <div class="common-title-view">
                                    <div>
                                        评估使用次数
                                    </div>
                                    <div>
                                        {{leftDeptInfo.deptRecordCount}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="common-content-view">
                            <div class="common-content-left-view">
                                <div class="iconDiv">
                                    <img src="../../assets/images/institution-5@1x.png">
                                </div>
                                <div class="common-title-view">
                                    <div>
                                        平均使用时长
                                    </div>
                                    <div>
                                        {{leftDeptInfo.deptAverageHour}}
                                    </div>
                                </div>
                            </div>

                            <div class="common-content-left-view">
                                <div class="iconDiv">
                                    <img src="../../assets/images/institution-6@1x.png">
                                </div>
                                <div class="common-title-view">
                                    <div>
                                        人脸检测次数
                                    </div>
                                    <div>
                                        {{leftDeptInfo.deptFaceCount}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="common-top-view">
                    <div class="left-bottom-view">
                        <div class="left-bottom-title" v-if="clickIndex == 1">机构在校学生</div>
                        <div class="left-bottom-title" v-if="clickIndex == 2">机构在职教师</div>
                        <div style="margin:10px 10px 0 0 ">
                            <el-input v-model="schoolName" class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @click="leftBtnClick(clickIndex)"></el-button>
                            </el-input>
                        </div>
                    </div>
                    <div class="bottom-common-view">
                        <div class="common-view" v-for="(item,index) in inStudentsList" :key="item.id"
                             :class="clickIndex == 1 && studentsIndex == index?'common-view-color':'common-view-color1'"
                             @click="studentsClick(item,index)">
                            <div class="iconDiv">
                                <el-image style="width: 50px; height: 50px" :src="item.imageUrl"></el-image>
                            </div>
                            <div class="bottom-info-view" v-if="clickIndex == 1">
                                <div>
                                    {{item.name}}
                                </div>
                                <div>
                                    {{item.birthday}}
                                </div>
                            </div>
                            <div class="bottom-info-view" v-if="clickIndex == 2">
                                <div>
                                    {{item.nick_name}}
                                </div>
                                <div>
                                    {{item.remark}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-view">
                <div class="common-right-view" v-if="clickIndex == 1">
                    <div style="display: flex;flex-direction: column;height: 260px">
                        <div class="common-right-radio">
                            <div class="div-select-view" @click="tabClick(1)">
                                学生档案信息
                            </div>
                            <div class="div-select-no-view" @click="tabClick(2)">
                                评估记录
                            </div>
                            <div class="div-select-no-view" @click="tabClick(3)">
                                成效对比图
                            </div>
                            <div class="div-select-no-view" @click="tabClick(4)">
                                学生课程表
                            </div>
                        </div>
                        <el-divider class="dashed-divider"></el-divider>
                        <div class="center-view">
                            <div style="flex: 2">
                                <div class="time-view">
                                    <el-date-picker style="width: 150px;" v-model="yearData" type="year"
                                                    placeholder="选择年" clearable :format="'yyyy'" value-format="yyyy" @change="yearChange">
                                    </el-date-picker>
                                    <el-select style="width: 150px;margin-left: 15px" v-model="monthData"
                                               placeholder="请选择" clearable @change="monthChange">
                                        <el-option v-for="item in monthOptions" :key="item.value" :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="money-view">
                                    <div class="lesson-fee-title">
                                        本月课时费
                                    </div>
                                    <div class="lesson-fee-num">
                                        {{deptCoursePriceData.deptCoursePriceCount}}
                                        <span>
                                        ￥
                                    </span>
                                    </div>
                                </div>
                            </div>
                            <div class="center-right-view">
                                <div @click="tabClick(5)">
                                    查看课程计划
                                </div>
                                <div @click="tabClick(6)">
                                    查看{{monthText}}月计划
                                </div>
                                <div @click="tabClick(7)">
                                    查看{{monthText}}周计划
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main-left-bottom-content">
                        <el-table :data="deptCoursePriceData.deptCourseList" height="calc(100%)" class="hide-scrollbar"
                                  :header-cell-style="headClass" :cell-style="rowClass">
                            <el-table-column prop="sign_time" label="时间">
                            </el-table-column>
                            <el-table-column prop="dept_name" label="机构">
                            </el-table-column>
                            <el-table-column prop="nick_name" label="上课教师">
                            </el-table-column>
                            <el-table-column prop="course_sales" label="课时数">
                            </el-table-column>
                            <el-table-column prop="course_price" label="费用">
                            </el-table-column>
                            <el-table-column prop="percentage" label="人脸检测">
                                <template slot-scope="scope">
                                    <span class="examine-view">查看</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="percentage" label="教学记录">
                                <template slot-scope="scope">
                                    <span class="examine-view">查看</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="common-right-view" v-if="clickIndex == 2">
                    <div style="display: flex;flex-direction: column;height: 100px">
                        <div class="common-right-radio">
                            <div class="div-select-view">
                                教师风采
                            </div>
                            <div class="div-select-no-view"
                                 @click="tabClick(8)">
                                教师排课表
                            </div>
                            <div class="div-select-no-view"
                                 @click="tabClick(9)">
                                教师信息
                            </div>
                            <div class="div-select-no-view"
                                 @click="tabClick(10)">
                                课时统计
                            </div>
                        </div>
                        <el-divider class="dashed-divider"></el-divider>
                    </div>
                    <div class="teacher-common-view">
                        <div class="teacher-view" v-for="(item,index) in inTeacherList" :key="item.id"
                             :class="teacherIndex == index?'teacher-view1':'teacher-view2'" @click="rightTeacherClick(item,index)">
                            <el-image class="header-view" :src="item.imageUrl"></el-image>
                            <div class="teacher-center-view">
                                <el-image :src="medalUrl" v-if="index == 0"></el-image>
                                <el-image :src="medalUrl1" v-if="index == 1"></el-image>
                                <el-image :src="medalUrl2" v-if="index == 2"></el-image>
                                <el-image :src="medalUrl3" v-if="index == 3"></el-image>
                                <span>{{item.nick_name}}</span>
                            </div>
                            <div class="teacher-center-view">
                                <span>擅长 : {{item.professional}}</span>
                            </div>
                            <div style="margin: 10px">
                                <el-image :src="starUrl"></el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 学生档案信息弹框 -->
        <studioDialog v-if="studioVisible" :isShowDialog="studioDialog"
                         @closeStudio="studioVisible = false" :selectStudentId="studentId"/>

        <!-- 成效对比弹框 -->
        <comparisonChartDialog v-if="comparisonChartVisible" :isShowDialog="comparisonChartDialog"
                         @closeStudio="comparisonChartVisible = false" :selectStudentId="studentId"/>

        <!-- 评估记录弹框 -->
        <evaRecordDialog v-if="isEvaRecordVisible" :isShowDialog="isEvaRecordDialog"
                         @closeEvaRecord="isEvaRecordVisible = false" :selectStudentId="studentId"/>

        <!-- 学生课程表 -->
        <courseDialog v-if="courseVisible" :isShowDialog="courseDialog"
                         @closeCourse="courseVisible = false" :selectStudentId="studentId"/>

        <!-- 课程计划 -->
        <lessonPlanDialog v-if="lessonPlanVisible" :isShowDialog="lessonPlanDialog"
                         @closeLessonPlan="lessonPlanVisible = false" :selectStudentId="studentId"/>

        <!-- 月计划 -->
        <monthlyPlanDialog v-if="monthlyPlanVisible" :isShowDialog="monthlyPlanDialog"
                          @closeMonthlyPlan="monthlyPlanVisible = false" :monthText="monthText"
                           :selectStudentId="studentId" :selectMonth="monthData" :selectYear="yearData1"/>

        <!-- 周计划 -->
        <weeklyPlanDialog v-if="weeklyPlanVisible" :isShowDialog="weeklyPlanDialog"
                           @closeWeeklyPlan="weeklyPlanVisible = false" :monthText="monthText"
                          :selectStudentId="studentId" :selectMonth="monthData" :selectYear="yearData1"/>

        <!-- 教师排课表 -->
        <teacherScheduleDialog ref="teacherSchedule" v-if="teacherScheduleVisible" :isShowDialog="teacherScheduleDialog"
                          @closeTeacherSchedule="teacherScheduleVisible = false" :deptTeacherId="deptId"/>

        <!-- 课时统计 -->
        <hourStatisticsDialog v-if="hourStatisticsVisible" :isShowDialog="hourStatisticsDialog"
                               @closeHourStatistics="hourStatisticsVisible = false" :deptTeacherId="deptId"/>

        <!-- 教师信息 -->
        <teacherInfoDialog v-if="teacherInfoVisible" :isShowDialog="teacherInfoDialog"
                              @closeTeacherInfo="teacherInfoVisible = false" :selectTeacherId="teacherId"/>
    </div>
</template>

<script>
    import headerView from '../header/index'
    import evaRecordDialog from './dialog/evaRecordDialog'
    import studioDialog from './dialog/studioDialog'
    import courseDialog from './dialog/courseDialog'
    import comparisonChartDialog from './dialog/comparisonChartDialog'
    import lessonPlanDialog from './dialog/lessonPlanDialog'
    import monthlyPlanDialog from './dialog/monthlyPlanDialog'
    import weeklyPlanDialog from './dialog/weeklyPlanDialog'
    import teacherScheduleDialog from './dialog/teacherScheduleDialog'
    import hourStatisticsDialog from './dialog/hourStatisticsDialog'
    import teacherInfoDialog from './dialog/teacherInfoDialog'
    import {getLeftDeptInfo,getDeptTreeList,treeselect} from '@/api/deptInstitution.js'
    import {getDeptTeacherList,getDeptTeacherViewList,getDeptCoursePriceList} from '@/api/teacher.js'
    import {getDeptStudentList} from '@/api/student.js'
    import TimeCalculation from '@/utils/TimeCalculation.js'

    export default {
        name: "index",
        components: {
            headerView,
            evaRecordDialog,
            studioDialog,
            courseDialog,
            lessonPlanDialog,
            monthlyPlanDialog,
            weeklyPlanDialog,
            teacherScheduleDialog,
            hourStatisticsDialog,
            teacherInfoDialog,
            comparisonChartDialog
        },
        watch: {
            deptId: {
                handler(newValue, oldValue) {
                    console.log('数组发生了变化:', newValue);
                    this.getLeftDeptInfo();
                    this.leftBtnClick(this.clickIndex);
                    // 获取机构科室信息
                    this.getDeptCoursePriceList();
                },
                deep: true
            },
            institutionName: {
                handler(newValue, oldValue) {
                  if(newValue){
                    console.log('搜索数据发生了变化:', newValue);
                    this.deptId = newValue
                    this.schoolAreaTree.forEach(element => {
                      let e = element.children.filter(item => item.id == this.deptId)
                      if(e.length > 0){
                        console.log("对应的数据行是===",e,element);
                        this.schoolAreaValue = element.id
                        this.schoolOptions = element.children;
                      }

                    })
                  }
                },
                deep: true
            },
            schoolAreaValue: {
                handler(newValue, oldValue) {
                    console.log('数组发生了变化:', newValue);
                    this.schoolAreaTree.forEach(element => {
                      if(element.id == newValue){
                        this.schoolOptions = element.children;
                      }
                    })
                },
                deep: true
            }
        },
        data() {
            return {
                schoolAreaTree: [],
                deptCoursePriceData:{
                    deptCourseList:[],
                    deptCoursePriceCount:0,
                },
                leftDeptInfo:{
                    deptStudentCount:0,
                    deptTeacherCount:0,
                    deptPlanCount:0,
                    deptRecordCount:0,
                    deptAverageHour:0,
                    deptFaceCount:0,
                },
                deptId:'',
                //教师信息弹框
                teacherInfoVisible: false,
                teacherInfoDialog: false,
                // 成效对比弹框
                comparisonChartVisible: false,
                comparisonChartDialog: false,
                //课时统计
                hourStatisticsVisible:false,
                hourStatisticsDialog:false,
                //教师排课表
                teacherScheduleVisible:false,
                teacherScheduleDialog:false,
                //周计划
                weeklyPlanVisible:false,
                weeklyPlanDialog:false,
                //月计划
                monthlyPlanVisible:false,
                monthlyPlanDialog:false,
                //课程计划
                lessonPlanVisible:false,
                lessonPlanDialog:false,
                //学生档案信息的控制
                studioVisible:false,
                studioDialog:false,
                //学生课程表
                courseVisible:false,
                courseDialog:false,
                //评估记录的弹框控制
                isEvaRecordVisible:false,
                isEvaRecordDialog:false,
                schoolOptions: [],
                cityOptions: [
                    {
                        value: '1',
                        label: '成都'
                    }, {
                        value: '2',
                        label: '南京'
                    }, {
                        value: '3',
                        label: '长春'
                    }, {
                        value: '4',
                        label: '北京'
                    }, {
                        value: '5',
                        label: '杭州'
                    }],
                institutionName: '',
                schoolAreaValue: '',
                allSchoolOptions: [],
                starUrl: require('../../assets/images/star5.png'),
                studentHeaderUrl: require('../../assets/images/student-header.png'),
                teacherHeaderUrl: require('../../assets/images/teacher-header.png'),
                yearData: TimeCalculation.getYeartData(),
                yearData1: TimeCalculation.getYeartData1(),
                monthData: TimeCalculation.getMonthData(),
                monthText: '',
                monthOptions: [
                    {
                        value: 1,
                        label: '1月'
                    },
                    {
                        value: 2,
                        label: '2月'
                    },
                    {
                        value: 3,
                        label: '3月'
                    },
                    {
                        value: 4,
                        label: '4月'
                    },
                    {
                        value: 5,
                        label: '5月'
                    },
                    {
                        value: 6,
                        label: '6月'
                    },
                    {
                        value: 7,
                        label: '7月'
                    },
                    {
                        value: 8,
                        label: '8月'
                    },
                    {
                        value: 9,
                        label: '9月'
                    },
                    {
                        value: 10,
                        label: '10月'
                    },
                    {
                        value: 11,
                        label: '11月'
                    },
                    {
                        value: 12,
                        label: '12月'
                    }
                ],
                tabIndex: 1,
                tabTeacherIndex: 1,
                studentsIndex: 0,
                teacherIndex: 0,
                inStudentsList: [],
                //教师id
                teacherId: '',
                //学生id
                studentId: '',
                medalUrl: require('../../assets/images/star1.png'),
                medalUrl1: require('../../assets/images/star2.png'),
                medalUrl2: require('../../assets/images/star3.png'),
                medalUrl3: require('../../assets/images/star4.png'),
                inTeacherList: [],
                schoolName: '',
                clickIndex: 1,
            };
        },
        mounted() {

        },
        created() {
            this.getTreeselect();
        },
        methods: {
            getTreeselect(){ // 获得地区和机构
              treeselect().then(resp=>{
                console.log("获得地区和机构======",resp);
                this.schoolAreaTree = resp.data[0].children;
                this.allSchoolOptions = []
                console.log("校区数据",this.schoolAreaTree);
                // 获得所有校区机构信息 allSchoolOptions
                this.schoolAreaTree.forEach((item,index)=>{
                  let schoolArr = item.children; // 所有校区集合
                  schoolArr.forEach((item2,index)=>{
                    this.allSchoolOptions.push({
                      id: item2.id,
                      label: item2.label,
                    })
                  })

                })
                console.log("所有学校机构数据",this.allSchoolOptions);
              }).then(resp=>{
                // 获得当前用户的机构  来确定输入框的数据
                this.getTopDeptTreeList();
              })
            },
            //年份变化监听
            yearChange(e){
                this.yearData1 = e;
                this.getDeptCoursePriceList();
            },
            //月份变化监听
            monthChange(e){
                this.getDeptCoursePriceList();
            },
            rightTeacherClick(item,index){
                console.log(item)
                this.teacherIndex = index;
                //点击的是教师列表条目
                this.teacherId = item.teacher_id
            },
            //获取当前账号管理机构列表
            getTopDeptTreeList(){
                getDeptTreeList().then((res) => {
                    if (res.code == 200){
                        this.deptId = res.data[0].dept_id;
                        this.schoolAreaTree.forEach(element => {
                          let e = element.children.filter(item => item.id == this.deptId)
                          if(e.length > 0){
                            console.log("对应的数据行是===",e,element);
                            this.schoolAreaValue = element.id
                            this.schoolOptions = element.children;
                          }

                        })
                        // this.cityOptions = res.data;
                        // this.schoolAreaValue = res.data[0].parent_id;
                    }
                });
            },
            //获取左侧机构数据信息
            getLeftDeptInfo(){
                getLeftDeptInfo({
                    deptId:this.deptId,
                }).then((res) => {
                    console.log(res);
                    if (res.code == 200){
                        this.leftDeptInfo.deptAverageHour = res.data.deptAverageHour;
                        this.leftDeptInfo.deptFaceCount = res.data.deptFaceCount;
                        this.leftDeptInfo.deptPlanCount = res.data.deptPlanCount;
                        this.leftDeptInfo.deptRecordCount = res.data.deptRecordCount;
                        this.leftDeptInfo.deptStudentCount = res.data.deptStudentCount;
                        this.leftDeptInfo.deptTeacherCount = res.data.deptTeacherCount;
                    }

                });
            },
            //获取机构学生列表
            getDeptStudentList(){
                getDeptStudentList({
                    deptId:this.deptId,
                    name:this.schoolName,
                }).then((res) => {
                    if (res.code == 200){
                        res.data.map(item=>{
                            if (item.image){
                                item.imageUrl = process.env.VUE_APP_BASE_API + item.image
                            }else{
                                item.imageUrl = this.studentHeaderUrl
                            }
                        })
                        this.inStudentsList = res.data;
                        if (this.inStudentsList && this.inStudentsList.length != 0){
                            this.studentId = this.inStudentsList[0].student_id
                        }else{
                            this.studentId = ''
                        }
                    }
                });
            },
            //获取机构教师列表
            getDeptTeacherList(){
                console.log("this.schoolName",this.schoolName)
                getDeptTeacherList({
                    deptId:this.deptId,
                    nickName:this.schoolName,
                }).then((res) => {
                    console.log("res",res)
                    if (res.code == 200){

                        res.data.map(item=>{
                            if (item.image){
                                item.imageUrl = process.env.VUE_APP_BASE_API + item.image
                            }else{
                                item.imageUrl = this.teacherHeaderUrl
                            }
                        })
                        this.inStudentsList = res.data;
                    }
                });
            },
            //获取教师风采列表
            getDeptTeacherViewList(){
                getDeptTeacherViewList({
                    deptId:this.deptId
                }).then((res) => {
                    if (res.code == 200){
                        res.data.map(item=>{
                            if (item.image){
                                item.imageUrl = process.env.VUE_APP_BASE_API + item.image
                            }else{
                                item.imageUrl = this.teacherHeaderUrl
                            }
                        })
                        this.inTeacherList = res.data;
                        this.teacherIndex = 0;
                        if (this.inTeacherList && this.inTeacherList.length != 0){
                            this.teacherId = this.inTeacherList[0].teacher_id
                        }else{
                            this.teacherId = ''
                        }
                    }
                });
            },
            //切换菜单
            tabClick(index) {
                this.tabIndex = index;
                if (index == 1){
                    if (this.studentId){
                        this.studioVisible = true;
                        this.studioDialog = true;
                    }else{
                        this.$message({
                            message: '暂无学生信息',
                            type: "warning",
                        });
                    }
                }else if (index == 2){
                    if (this.studentId){
                        this.isEvaRecordVisible = true;
                        this.isEvaRecordDialog = true;
                    }else{
                        this.$message({
                            message: '暂无学生信息',
                            type: "warning",
                        });
                    }
                }else if(index == 3){
                  // 成效对比
                  if (this.studentId){
                    this.comparisonChartVisible = true;
                    this.comparisonChartDialog = true;
                  }else{
                    this.$message({
                      message: '暂无学生信息',
                      type: "warning",
                    });
                  }
                }else if (index == 4){
                    this.courseVisible = true;
                    this.courseDialog = true;
                }else if (index == 5){
                    if (this.studentId){
                        this.lessonPlanVisible = true;
                        this.lessonPlanDialog = true;
                    }else{
                        this.$message({
                            message: '暂无学生信息',
                            type: "warning",
                        });
                    }
                }else if (index == 6){
                    this.monthlyPlanVisible = true;
                    this.monthlyPlanDialog = true;
                }else if (index == 7){
                    this.weeklyPlanVisible = true;
                    this.weeklyPlanDialog = true;
                }else if (index == 8){
                    this.teacherScheduleVisible = true;
                    this.teacherScheduleDialog = true;
                }else if (index == 9){
                    if (this.teacherId){
                        this.teacherInfoDialog = true;
                        this.teacherInfoVisible = true;
                    }else{
                        this.$message({
                            message: '暂无教师信息',
                            type: "warning",
                        });
                    }

                }else if (index == 10){
                    this.$message({
                        message: '暂未开放',
                        type: "warning",
                    });
                    return;
                    this.hourStatisticsVisible = true;
                    this.hourStatisticsDialog = true;
                }
            },
            tabTeacherClick(index) {
                this.tabTeacherIndex = index;
            },
            studentsClick(item, index) {
                this.studentsIndex = index
                if (this.clickIndex == 1){
                    //点击的是学生列表条目
                    this.studentId = item.student_id
                }else{
                    //点击的是教师列表条目
                    // this.teacherId = item.user_id
                }
            },
            leftBtnClick(index) {
                this.clickIndex = index;
                this.studentsIndex = 0;
                if (index == 1){
                    //点击学生数
                    this.getDeptStudentList();
                }else{
                    //点击教师数
                    this.getDeptTeacherList();
                    this.getDeptTeacherViewList();
                }
            },
            //获取机构科室信息
            getDeptCoursePriceList(){
                let monthItem = this.monthOptions.find(item=>item.value == this.monthData)
                this.monthText = monthItem.label;
                let dataForm = {
                    deptId:this.deptId,
                    searchDate:this.yearData1 + "-" + this.monthData,
                }
                console.log("dataForm",dataForm)
                getDeptCoursePriceList(dataForm).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.deptCoursePriceData.deptCourseList = res.data.deptCourseList;
                        this.deptCoursePriceData.deptCoursePriceCount = res.data.deptCoursePriceCount;
                    }
                });
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:15px;";
            },
        }
    }
</script>

<style lang="scss" scoped>
    *{
      cursor: pointer;
    }
    .content-view {
        background: url("../../assets/images/index-bg.jpg") repeat-y;
        background-size: 100vw 100vh;
        width: 100vw;
        height: 100vh;
    }

    .top-select-view {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        margin-top: 1%;
    }

    .main-view {
        height: 81vh;
        display: flex;
        flex-direction: row;
        margin: 1vh 1% 0 2%;

        .left-view {
            width: 30%;

            display: flex;
            /*align-items: center;*/
            flex-direction: column;
            border-radius: 15px;

            .common-top-view {
                background: white;
                border-radius: 0.6vw;
                height: 42vh;
                width: 95%;
            }

            .left-top-view-d {
                display: flex;
                flex-direction: column;
                margin-bottom: 2vh;

                .left-top-view-title {
                    display: flex;
                    flex-direction: row;
                    height: 10%;
                    margin-bottom: 15px;
                    justify-content: space-between;

                    .common-left-title {
                        font-size: 0.1rem;
                        margin-top: 15px;
                        margin-left: 15px;
                        font-weight: bold;
                        color: #061433;
                    }

                    .common-right-title {
                        display: flex;
                        flex-direction: row;
                        margin-top: 15px;
                        margin-right: 15px;

                        .left-title {
                            background: red;
                            border-radius: 5px;
                            font-size: 0.06rem;
                            height: 20px;
                            line-height: 20px;
                            padding: 0 10px;
                            text-align: center;
                            color: white;
                            margin-right: 10px;
                            margin-top: 9px;
                        }

                        .right-title {
                            font-size: 0.1rem;
                            height: 30px;
                            line-height: 30px;
                            color: #FEBA23;
                            font-weight: bold;
                            margin-right: 5px;
                            border-bottom: 2px solid #FEBA23;
                        }
                    }
                }

                .left-top-view-content {
                    display: flex;
                    flex-direction: column;
                    height: 90%;
                    margin: 15px;

                    .common-content-view {
                        display: flex;
                        flex-direction: row;
                        margin-bottom: 15px;
                        justify-content: space-between;
                        height: 30%;

                        .common-content-left-view {
                            border: 1px solid #f3f3f3;
                            flex: 1;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            border-radius: 10px;
                            align-items: center;
                            margin: 0 10px;
                            padding: 0 20px;
                        }

                        .common-view-backage {
                            background: #fed254;
                        }

                        .common-view-backage1 {
                            background: white;
                        }

                        .common-title-view {
                            display: flex;
                            flex-direction: column;
                            align-items: end;

                            div:first-child {
                                font-size: 0.07rem;
                                font-weight: bold;
                            }

                            div:last-child {
                                font-size: 0.1rem;
                                font-weight: bold;
                                margin-top: 4px;
                            }
                        }

                        .iconDiv {
                            width: 50px;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50px;
                        }
                    }
                }
            }

            .left-bottom-view {
                display: flex;
                flex-direction: row;
                height: 10%;
                margin-bottom: 25px;
                justify-content: space-between;

                .left-bottom-title {
                    font-size: 0.09rem;
                    margin-top: 15px;
                    margin-left: 15px;
                    font-weight: bold;
                    color: #061433;
                }
            }

            .bottom-common-view {
                display: grid;
                height: calc(42vh - 75px);
                padding: 10px 3% 10px 3%;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                flex-direction: row;
                justify-content: space-around;
                overflow: hidden;
                overflow-y: scroll;
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none;

                .common-view {
                    border-radius: 8px;
                    height: 80px;
                    background: white;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    padding: 0 15px;
                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
                    /*box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.19);*/

                    .bottom-info-view {
                        margin-left: 10px;

                        div:first-child {
                            font-size: 0.1rem;
                            font-weight: bold;
                        }

                        div:last-child {
                            font-size: 0.08rem;
                            margin-top: 5px;
                        }
                    }

                    iconDiv {
                        width: 50px;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50px;
                    }
                }

                .common-view-color {
                    border: 2px solid #337ab7;
                }

                .common-view-color1 {
                    border: 1px solid white;
                }
            }
        }

        .right-view {
            display: flex;
            width: 70%;
            align-items: center;
            flex-direction: column;
            border-radius: 15px;

            .common-right-view {
                background: white;
                border-radius: 0.6vw;
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;

                .common-right-radio {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    margin-top: 20px;

                    div {
                        text-align: center;
                        border-radius: 8px;
                        padding: 12px 35px 12px 35px;
                        margin: 0 1.6%;
                        font-size: 0.09rem;
                        color: white;
                    }

                    .div-select-view {
                        background: #54a3ff;
                    }

                    .div-select-no-view {
                        background: #FEBA23;
                    }

                    div:first-child {
                        margin-left: 10%;
                    }

                    div:last-child {
                        margin-right: 10%;
                    }
                }

                .center-view {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;

                    .time-view {
                        display: flex;
                        flex-direction: row;
                        margin-left: 5%;
                    }

                    .money-view {
                        display: flex;
                        flex-direction: column;
                        margin-left: 7%;
                        margin-top: 2%;

                        .lesson-fee-title {
                            font-size: 0.12rem;
                            color: black;
                            font-weight: bold;
                        }

                        .lesson-fee-num {
                            font-size: 0.24rem;
                            color: black;
                            font-weight: bold;
                            margin-top: 5px;

                            span {
                                font-size: 0.14rem;
                            }
                        }
                    }

                    .center-right-view {
                        flex: 1;
                        margin: 0% 4% 0 0;

                        div {
                            width: 250px;
                            background: #54a3ff;
                            text-align: center;
                            border-radius: 8px;
                            padding: 10px 35px 10px 35px;
                            margin: 10px 1.6%;
                            font-size: 0.08rem;
                            color: white;
                        }
                    }
                }

                .main-left-bottom-content {
                    width: 98%;
                    flex: 1;
                    border: 1px solid #dedede;
                    border-radius: 15px;
                    overflow: hidden;
                    text-align: center;
                    margin-left: 1%;
                    margin-bottom: 1%;

                    .examine-view {
                        color: #2b2cff;
                        border-bottom: 1px solid #2b2cff;
                    }
                }

                .teacher-common-view {
                    width: 100%;
                    flex: 1;
                    border-radius: 15px;
                    display: grid;
                    padding: 10px 3% 10px 3%;
                    margin-bottom: 15px;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 15px;
                    flex-direction: row;

                    overflow: hidden;
                    overflow-y: scroll;
                    scrollbar-width: none; /* Firefox */
                    -ms-overflow-style: none;
                    //水平居中
                    /*place-items: center;*/
                    /*justify-content: center;*/
                    /*align-items: center;*/

                    .teacher-view {
                        flex: 1;
                        border-radius: 8px;
                        width: 200px;
                        height: 280px;
                        background: white;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        padding: 0 15px;
                        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
                        /*box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1), 0px 4px 6px 0px rgba(0, 0, 0, 0.19);*/

                        .bottom-info-view {
                            margin-left: 10px;

                            div:first-child {
                                font-size: 0.1rem;
                                font-weight: bold;
                            }

                            div:last-child {
                                font-size: 0.08rem;
                                margin-top: 5px;
                            }
                        }

                        .header-view {
                            width: 100%;
                            height: 150px;
                            margin-top: 10px
                        }

                        .teacher-center-view {
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                            margin-top: 10px;

                            span {
                                margin-left: 10px;
                                font-size: 0.08rem;
                                font-weight: bold;
                            }
                        }
                    }

                    .teacher-view1 {
                        border: 2px solid #337ab7;
                    }

                    .teacher-view2 {
                        border: 1px solid white;
                    }
                }
            }
        }
    }

    /deep/ .el-image__inner {
        border-radius: 10px !important;
    }

    /deep/ .el-input-group__append button.el-button {
        background-color: blue;
        color: white;
    }

    /deep/ .dashed-divider {
        border-top: 1px dashed #ccc;
    }

    /deep/ .el-divider--horizontal {
        display: block;
        height: 0.00521rem;
        width: 94%;
        margin: 1.5% 0 1% 3%;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-table__body {
        width: 100% !important;
        table-layout: fixed;
        border-collapse: separate;
    }

    /deep/ .el-input--medium .el-input__inner {
        color: #000000;
        border: 1px solid #000000;
        height: 0.1875rem;
        line-height: 0.1875rem;
        background: transparent;
    }
</style>
